<template>
  <div class="addMedicine-container">
    <el-form
      ref="formRef"
      :model="d.form"
      label-width="100px"
      label-position="top"
    >
      <section class="info-content">
        <xm-card-header title="基本信息"></xm-card-header>
        <el-row :gutter="20">
          <el-col :span="8">
            <XmFIntput
              quick
              v-model="d.form.commonName"
              prop="commonName"
              label="通用名称:"
            ></XmFIntput>
          </el-col>
          <el-col :span="8">
            <XmFIntput
              quick
              v-model="d.form.specifications"
              prop="specifications"
              label="规格型号:"
            ></XmFIntput>
          </el-col>

          <el-col :span="8">
            <XmFIntput
              quick
              v-model="d.form.medicineName"
              prop="medicineName"
              label="药品名称:"
            ></XmFIntput>
          </el-col>
          <el-col :span="8">
            <!-- 将此处改成多选框 -->
            <XmFSelect
              quick
              v-model="d.form.type"
              prop="type"
              label="药品类型:"
              :options="medicinalTypes"
            ></XmFSelect>
          </el-col>
          <el-col :span="8">
            <XmFSelect
              quick
              v-model="d.form.drugType"
              prop="drugType"
              label="药品性质:"
              :options="medicinalAttrs"
            ></XmFSelect>
          </el-col>

          <el-col :span="8">
            <XmFIntput
              quick
              v-number
              v-model="d.form.termValidity"
              prop="termValidity"
              label="有效期(月):"
            ></XmFIntput>
          </el-col>
          <!-- TODO company -->
          <el-col :span="8">
            <XmFSelect
              quick
              v-model="d.form.usage"
              prop="usage"
              label="用法:"
              :options="usageOptions"
            ></XmFSelect>
          </el-col>
          <el-col :span="8">
            <XmFIntput
              quick
              v-model="d.form.packagingUnit"
              prop="packagingUnit"
              label="包装单位:"
            ></XmFIntput>
          </el-col>
          <el-col :span="8">
            <XmFIntput
              quick
              v-model="d.form.unit"
              prop="unit"
              label="剂量单位:"
            ></XmFIntput>
          </el-col>
          <el-col :span="8">
            <el-form-item
              :rules="[
                { required: true, message: '不能为空', trigger: 'change' },
              ]"
              label="药品剂型:"
              prop="dosageForm"
            >
              <el-cascader
                v-model="d.form.dosageForm"
                :options="dosageForms"
                style="width: 100%"
              ></el-cascader>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <XmFSelect
              isMultiple
              quick
              v-model="d.form.intended"
              prop="intended"
              label="适用人群:"
              :options="fitPeople"
            ></XmFSelect>
          </el-col>
          <el-col :span="8">
            <XmFIntput
              quick
              v-model="d.form.createEnterprise"
              prop="createEnterprise"
              label="生产企业:"
            ></XmFIntput>
          </el-col>

          <el-col :span="8">
            <XmFIntput
              quick
              v-model="d.form.approvalNumber"
              prop="approvalNumber"
              label="批准文号:"
            ></XmFIntput>
          </el-col>
        </el-row>
      </section>
      <section class="info-content">
        <xm-card-header title="主要"></xm-card-header>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="功能主治:"
          prop="attending"
        >
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="d.form.attending"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="用法用量:"
          prop="dosageUsage"
        >
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="d.form.dosageUsage"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="不良反应:"
          prop="adverseReaction"
        >
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="d.form.adverseReaction"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="注意事项:"
          prop="mattersNeedingAttention"
        >
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="d.form.mattersNeedingAttention"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
      </section>
      <section class="info-content">
        <xm-card-header title="其他"></xm-card-header>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="禁忌:"
          prop="taboo"
        >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="d.form.taboo"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="上市许可持有人:"
          prop="listingPermitHolder"
        >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="d.form.listingPermitHolder"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="主要成分:"
          prop="mainComponents"
        >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="d.form.mainComponents"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="性状:"
          prop="character"
        >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="d.form.character"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="孕妇/哺乳期用药:"
          prop="lactationMedication"
        >
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="d.form.lactationMedication"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="儿童用药:"
          prop="children"
        >
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="d.form.children"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="老年患者用药:"
          prop="aged"
        >
          <el-input
            type="textarea"
            :rows="6"
            placeholder="请输入内容"
            v-model="d.form.aged"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          label="贮藏:"
          props="storage"
        >
          <el-input
            type="textarea"
            :rows="2"
            placeholder="请输入内容"
            v-model="d.form.storage"
            maxlength="5000"
            show-word-limit
          ></el-input>
        </el-form-item>
      </section>
      <section class="info-content">
        <xm-card-header
          title="预警设置"
          subTitle="未填写则默认有效期预警为180天及库存预警为10"
        ></xm-card-header>
        <XmFIntput
          quick
          v-model.number="d.form.earlyWarningDay"
          prop="earlyWarningDay"
          label="有效期预警天数:"
        ></XmFIntput>
        <XmFIntput
          quick
          v-model.number="d.form.earlyWarningNumber"
          prop="earlyWarningNumber"
          label="库存预警件数:"
        ></XmFIntput>
      </section>

      <section class="info-content">
        <xm-card-header title="药品图片"></xm-card-header>
        <el-form-item :rules="uploadRules" label="药品图片" prop="imgUrls">
          <file-upload
            type="picture"
            ref="updataFile"
            v-model="d.form.imgUrls"
          ></file-upload>
        </el-form-item>
      </section>

      <section class="info-content">
        <xm-card-header title="说明书图片"></xm-card-header>
        <el-form-item :rules="uploadRules" label="说明书图片" prop="expimgUrls">
          <file-upload
            type="picture"
            ref="updataFile1"
            v-model="d.form.expimgUrls"
          ></file-upload>
        </el-form-item>
      </section>
      <section class="info-content foot">
        <el-button type="primary" @click="toSave">保存</el-button>
        <el-button @click="toBack">取消</el-button>
      </section>
    </el-form>
  </div>
</template>
<script>
  import medicinal from '@/hooks/medicinal.vue'
  import emr from '@/hooks/emr.vue'
  import { save, loadData } from '@/api/modules/medicinal'
  import common from '@/utils/common'
  import { reactive, toRefs, ref, onBeforeMount, computed } from 'vue'
  import { useRoute, useRouter } from 'vue-router'
  export default {
    name: 'addMedicine',
    setup() {
      const d = reactive({
        form: { earlyWarningDay: 180, earlyWarningNumber: 100 },
      })

      const route = useRoute()
      const router = useRouter()
      const toloadData = async function () {
        common.XmLoading(true)
        loadData({ id: route.query.id })
          .then((res) => {
            common.XmLoading()
            res.data.dosageForm = res.data.dosageForm.split(',')
            d.form = res.data
          })
          .catch(() => {
            common.XmLoading()
          })
      }
      const formRef = ref(null)
      const updataFile = ref(null)
      const updataFile1 = ref(null)
      const toSave = function () {
        if (!updataFile.value.getStatus() || !updataFile1.value.getStatus()) {
          common.XmMessage(3, '还未上传完成')
          return
        }
        formRef.value.validate(async (valid) => {
          if (valid) {
            let dosageForm = d.form.dosageForm.join(',')
            await save({ ...d.form, dosageForm, id: route.query.id })
            common.XmMessage(0, '保存成功')
            router.go(-1)
          } else {
            common.XmMessage(3, '表单未填写完毕')
          }
        })
      }

      const toBack = function () {
        router.go(-1)
      }

      onBeforeMount(() => {
        if (route.query.id) {
          toloadData()
        }
      })

      const { usages } = emr()
      const usageOptions = computed(() => {
        return usages.map((item) => {
          return { lable: item.termChs, value: item.termChs }
        })
      })

      const validF = function (rules, value, cb) {
        if (!Array.isArray(JSON.parse(value)) || JSON.parse(value).length < 1) {
          cb(new Error('上传图片'))
        }
        cb()
      }
      const uploadRules = [
        { required: true, message: '不能为空' },
        { required: true, validator: validF },
      ]
      return {
        d,
        toBack,
        formRef,
        toSave,
        updataFile,
        updataFile1,
        toloadData,
        usageOptions,
        uploadRules,
        ...toRefs(medicinal()),
      }
    },
  }
</script>
<style lang="scss" scoped>
  .addMedicine-container {
    .info-content {
      margin: 22px;
      background-color: white;
      padding: 15px;
    }
    .foot {
      display: flex;
      justify-content: flex-end;
    }
  }
</style>
